<template>
  <div>
  <el-container>
    <el-header  style="height:5%">
      <topBar/>
      <middle :show="false"/>
    </el-header>
    <el-container class="c">
     <el-col :span="3" :offset="3"><el-aside width="200px">
        <el-menu
          :default-active="index"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="select"

          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>账户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">我的订单</el-menu-item>
              <el-menu-item index="1-2">收货地址</el-menu-item>
              <el-menu-item index="1-3">优惠券</el-menu-item>
              <el-menu-item index="1-4">积分</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">退货管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">账户安全</span>
          </el-menu-item>
        </el-menu>
      </el-aside></el-col>
      <el-col :span="15"  ><el-main>

      </el-main>
        <myorder v-if="index=='1-1'"></myorder>
        <addressList v-if="index=='1-2'"></addressList>
        <myCoupon v-if="index=='1-3'||index=='1-4'"></myCoupon>
        <refund v-if="index=='2'"></refund>
        <userInfo v-if="index=='3'"></userInfo>
      </el-col>
    </el-container>
  </el-container>
  <myfooter/>
  </div>
</template>

<script>
  import topBar from '@/components/topBar'
  import myfooter from '@/components/myfooter'
  import myorder from '@/components/myorder'
  import addressList from '@/components/addressList'
  import myCoupon from '@/components/myCoupon'
  import refund from '@/components/refund'
  import userInfo from '@/components/userInfo'
  import middle from '@/components/middle'
    export default {
      components: {topBar,middle, myfooter,myorder,addressList,myCoupon,refund,userInfo},
      name: "index",
      data(){
        return{
          activeName:1,
          index:"1-1"
        }
      },
        methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          select(index, indexPath) {
            this.index=index;
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
    }
</script>

<style scoped>
.c{
  min-height: 750px;
}
  .main_cate_hb{
    display: none;
  }
</style>
